<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>月光边境</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ include file="/WEB-INF/jsp/common/style_easyui.jsp"%>
<link rel="stylesheet" href="${ctx }/plugins/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="${ctx }/plugins/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/jquery.format.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/bootstrap-hover-dropdown.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/codemirror.min.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/css.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/format.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/htmlmixed.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/javascript.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/jsoneditor.min.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/ObjTree.min.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/xml.js"></script>
<script type="text/javascript" src="${ctx }/tools/js/json-format.js"></script>
<style>
a.active{background: #0ae;color: #fff}
.syntaxhighlighter{margin: 0!important}
</style>
<body>
	<div id="bar" class="easyui-toolbar datagrid-toolbar" >
		代码高亮：
		<a class="easyui-linkbutton btn-primary">java</a>
		<a class="easyui-linkbutton btn-primary">python</a>
		<a class="easyui-linkbutton btn-primary">xml</a>
		<a class="easyui-linkbutton btn-primary">html</a>
		<a class="easyui-linkbutton btn-primary">javascript</a>
		<a class="easyui-linkbutton btn-primary">css</a>
		<a class="easyui-linkbutton btn-primary">sql</a>
		<a class="easyui-linkbutton btn-success" data-options="iconCls:'fa fa-copy'" onclick="selectText()">复制</a>
	</div>
	<div id="code_wrap" style="width: 100%;overflow: auto;">
		<div style="height: 350px">
			<textarea class="aceEditor" data-mode="java" style="height: 100%"></textarea>
		</div>
		<div id="preview">
		</div>
	</div>
</body>
<script>
$(function(){
	$('.btn-primary').click(function(){
		$('textarea').data('mode',$(this).text());
		$('textarea').data('editor').refreshMode();
		var pre = '<pre class="brush:'+$(this).text()+';toolbar:false;quick-code:false">';
		$('.btn-primary').removeClass('active');
		$(this).addClass('active');
		//特殊字符转义
		code = $('textarea').data('editor').getValue();
		//格式化
		if($(this).text()=='java'||$(this).text()=='javascript'){
			code = js_beautify(code, 1, '\t');
		}
		if($(this).text()=='xml'){
			code = $.format(code, {method : 'xml'});
		}
		if($(this).text()=='html'){
			code = style_html(code, 1, '\t');
		}
		if($(this).text()=='css'){
			code = CSSPacker['format'](code);
		}
		//特殊字符转义
		code = code.replace(/</g,"&lt;").replace(/>/g,"&gt;");
		$('#preview').html(pre+code+'</pre>');
		//代码高亮
		SyntaxHighlighter.highlight();
	});
	$('.btn-primary:eq(0)').click();
});
//选中代码div并复制到粘贴板
function selectText() {
    var text = $('.container')[0];
    if (document.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    } else {
        alert("none");
    }
    document.execCommand("Copy"); //执行浏览器复制命令
}
</script>
<script type="text/javascript" src="${ctx }/tools/js/format.js"></script>
<script type="text/javascript" src="${ctx }/plugins/ace-editor/ace.js"></script>
</html>